[우테코]레벨1 계산기 미션 후기

계산기 미션

어제 진행한 cypress 초간단 미션에 이어 오늘은 계산기 미션을 진행했습니다. 이번 미션 역시 cypress에 적응하기 위한 미션이었습니다. 많은 기능이 들어가지 않는 계산기라 기능 구현은 간단했으나 오늘도 역시 테스트코드를 작성하기 위해 많은 시간을 들였습니다.

어제 페어인 하루와 같이 삽질을 하면서 여러 시행착오를 겪은 덕분에 cypress의 기본 동작을 위해 필요한 describe, it, cy등의 메서드를 알고 있는 상태에서 미션을 진행했습니다.

TDD를 연습하기 위한 미션이었기 때문에 어제와 동일하게 테스트 코드를 먼저 작성한 후에 기능을 구현했습니다.

cypress로 특정 값을 가진 요소에 클릭 유도하기

테스트 코드 작성을 시작하면서 처음부터 헤맸습니다. 어제 구현한 테스트 코드의 경우 특정 id나 class를 가진 단일 요소를 클릭하면 되는 경우였지만 오늘 구현한 테스트 코드의 경우 단일 요소가 아닌 파싱한 요소의 하위 노드가 클릭 됐을 때 해당 값이 표시되는지 확인을 해야했습니다.

저희는 이 때 cy.contains() 메서드를 활용하여 다음과 같이 특정 value를 포함한 node에 클릭을 유도했습니다.

cy.get('#total').then((display) => {
    const displayText = display.text();

    cy.get('.digits').contains('1').click(); // <-- contains() 메서드 사용
    cy.get('#total').should('have.text', '1');
    .
    .
    .
});

cypress로 alert 검증하기

이번 미션을 진행하면서 가장 많이 헤맨 부분이 바로 이 alert를 검증하는 부분이었습니다. 처음 cy.on()메서드를 통해 해결하려 했으나 cy.on()메서드의 경우 해당 이벤트가 발생했을 경우에만 실행이 되는 테스트코드이기 때문에 alert가 발생하지 않은 경우에는 아예 실행되지 않으면서 해당 단락을 건너뛰는 치명적인 문제가 있었습니다.

그 다음으로 시도한 방법이 stub()메서드를 활용하는 방법이었습니다. 먼저 stub() 메서드를 활용해 아래와 같은 코드를 작성했습니다.

it('네자리 이상의 숫자가 입력됐을 경우 경고메세지가 뜬다.', () => {
  const stub = cy.stub()
  cy.on('window:alert', stub)
  cy.get('#total').then(() => {
    for (let i = 0; i < 3; i++) {
      cy.get('.digits')
        .contains('1')
        .click()
    }
    cy.get('.digits')
      .contains('1')
      .click()
      .then(() => {
        expect(stub.getCall(0)).to.be.calledWith(
          '숫자는 세 자리까지만 입력 가능합니다!'
        )
      })
    cy.get('#total').should('have.text', '111/111')
  })
})

sutb()메서드를 사용해 const stub = cy.stub(); 변수를 선언하고 cy.on('window:alert`, stub);을 작성해 alert가 발생할 경우 해당 alert의 내용을 stub에 담아줬습니다. 이후 cy.get()에 콜백으로 alert가 발생할 상황을 유도하고 해당 값에 원하는 텍스트가 있는지 확인하는 방식으로 문제를 해결할 수 있었습니다.

일단 해결은 됐지만 이 방법이 best pracitce가 아닐거라는 생각이 많이 들었습니다. 위 방법을 사용하면 stub에 쌓인 callstack에 매직넘버를 통해 접근해야 하는데 이런 방법보다 더 우아한 방법이 있을거라고 생각했지만 아쉽게도 다른 방법을 찾지 못 했습니다.

다른 크루들의 코드를 보면서 보다 우아한 해결방법이 있는지 찾아봐야겠습니다.

전체 코드 확인 : 링크